<!-- 设备手册 -->
<template>
  <px-scrollbar height="calc(100vh - 268px)">
    <px-form v-if="type === 'edit'" ref="ruleFormRef" :rules="rules" inline :model="formValue" label-width="100px">
      <!-- <PhotoUpload
        photoType="add"
        :actionUrl="'/ifp/dms/api/v1/doc/upload'"
        :downloadUrl="'/ifp/dms/api/v1/doc/download'"
        :photoData="{ parentId }"
        :photoList="formValue.picFileList"
        style="margin-bottom: 18px"
        :isCustomUpload="true"
        @changePhotoList="changeFileList"
        @savePhotoStatus="saveFileStatus"
      /> -->
      <PhotoUpload
        photoType="add"
        :photoData="{ moduleName: 'eqp' }"
        :photoList="formValue.picFileList"
        style="margin-bottom: 18px"
        @changePhotoList="changePhotoList"
        @savePhotoStatus="savePhotoStatus"
      />
      <px-form-item>
        <px-button type="primary" :disabled="fileStatusFlag" @click="handleSubmit(ruleFormRef)"> 保存 </px-button>
        <px-button @click="resetForm(ruleFormRef)">取消</px-button>
      </px-form-item>
    </px-form>
    <div v-if="type === 'detail'">
      <PhotoUpload
        v-if="formValue.picFileList && formValue.picFileList.length !== 0"
        photoType="view"
        :photoData="{ moduleName: 'eqp' }"
        :photoList="formValue.picFileList"
      />
      <px-empty v-else description="暂无数据" />
    </div>
  </px-scrollbar>
</template>

<script setup lang="ts">
import { saveBoomImg } from "@/api/equip/archive";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { PxMessage } from "px-ui";
import { computed, ref, watchEffect } from "vue";

const ruleFormRef = ref<any>();

const formValue = ref<Record<string, any>>({
  picFileList: []
});
const fileStatusFlag = ref(false);

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "getEqpDetails"]);

// 父级传过来的值
const props = defineProps(["eqpDetailData", "activeName", "type"]);

watchEffect(async () => {
  if (props.activeName === "img") {
    formValue.value.picFileList = props.eqpDetailData.picFileList;
  }
});

// 表单校验规则
const rules = computed(() => ({
  picFileList: [{ required: true, message: "请选择文件", trigger: "blur" }]
}));

const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const pictureList = [];
      if (formValue.value.picFileList && formValue.value.picFileList.length > 0) {
        formValue.value.picFileList.forEach(item => {
          if (item?.id) {
            pictureList.push(item.id);
          } else if (item?.response.data) {
            pictureList.push(item.response.data.id);
          }
        });
      }
      const res = await saveBoomImg({
        eqpId: props.eqpDetailData.eqpId,
        picFileList: pictureList
      });
      if (res) {
        PxMessage.success("设备图纸修改成功");
        emits("getEqpDetails");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 新的文件列表
const changePhotoList = async val => {
  formValue.value.picFileList = val;
  fileStatusFlag.value = false;
};

// 文件是否上传完，是否可以保存
const savePhotoStatus = val => {
  fileStatusFlag.value = val;
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
.equip-img-carousel {
  :deep {
    .px-carousel__container {
      width: 100%;
      height: 600px;
    }
  }
}
</style>
